import React from "react";
import "./index.less";
import { Collapse, Space, Row, Button, Col } from "tdesign-react";
import { DesktopIcon, FileIcon, FolderIcon } from "tdesign-icons-react";
import FileItem from './../../components/FileItem';

export default function Sender() {
  return (
    <div className="sender">
      <h2>发送文件</h2>
      <p>点对点文件传输助手，可实时共享，也可直接推送</p>
      <h3>直接推送文件到对方设备</h3>
      <Collapse borderless expandIconPlacement="right">
        <Collapse.Panel
          header={
            <Space>
              <DesktopIcon size={18} className="desktop" />
              <span>Mac OS10.15.7-971</span>
            </Space>
          }
        >
          <Row gutter={10}>
            <Col>
              <Button icon={<FileIcon />}>发送文件</Button>
            </Col>
            <Col>
              <Button variant="outline" icon={<FolderIcon />}>
                发送文件夹
              </Button>
            </Col>
            <Col flex={1}>
              <p>粘帖或者拖拽文件/文件夹到此</p>
            </Col>
          </Row>
          <FileItem />
        </Collapse.Panel>
      </Collapse>
    </div>
  );
}
